<template>
    <el-tabs
        v-model="activeName"
        type="card"
        class="demo-tabs"
        @tab-click="handleClick"
    >
        <el-tab-pane v-for="(item,index) in auditType" :key="index" :label="item.label" :name="item.value" />
    </el-tabs>
    <div class="detailed">
        <div class="detailed-item" @click="getDetails" :class="showCursor ? 'showCursor':''">
            <div id="areaChartsRef" ref="areaChartsRef" class="echarts"></div>
            <img src="@/assets/images/housing/d_area.png" alt="">
            <b>抽样率</b>
            <span><i>{{ infos.area }}</i>(万平方米)</span>
        </div>
        <div class="detailed-item" @click="getDetails" :class="showCursor ? 'showCursor':''">
            <div id="numChartsRef" ref="numChartsRef" class="echarts"></div>
            <img src="@/assets/images/housing/d_num.png" alt="">
            <b>抽样率</b>
            <span><i>{{ infos.dong }}</i>(栋)</span>
        </div>
    </div>
</template>
<script setup name="DetailedSurvey">
// 引入echats
import * as echarts from 'echarts';
import { getCurrentInstance, onMounted } from 'vue';
import { getSiftSituation } from '@/api/housingFacilities.js';
const emit = defineEmits(['getDetails']);
const props = defineProps({
    showCursor: Boolean,
})
const data = reactive({
    activeName: 'all',//统计审核状态,默认显示全部
    infos: {},
    all: {},
    check: {},
    totalArea:'',
    totalNum:'',
})
const { activeName, infos, all, check, totalArea, totalNum } = toRefs(data)
const auditType = [{label: '全部', value: 'all'}, {label:'已审核', value:'audited'}]
function handleClick(tab){
    if(tab.props.name==='all'){
        infos.value = all.value
    }else{
        infos.value = check.value
    }
    totalArea.value = infos.value.areaRate;
    totalNum.value = infos.value.dongRate;
    // 渲染面积
    renderChart(proxy.refs.areaChartsRef, totalArea.value, colorsArea);
    // 渲染楼栋
    renderChart(proxy.refs.numChartsRef, totalNum.value, colorsNum);
}

function getData() {
    getSiftSituation().then((res) => {
        infos.value = res.data.all[0]
        totalArea.value = res.data.all[0].areaRate;
        totalNum.value = res.data.all[0].dongRate;
        all.value = res.data.all[0]
        check.value = res.data.check[0]
        // 渲染面积
        renderChart(proxy.refs.areaChartsRef, totalArea.value, colorsArea);
        // 渲染楼栋
        renderChart(proxy.refs.numChartsRef, totalNum.value, colorsNum);
    });
}

// 当前实例
const proxy = getCurrentInstance();
// 面积
const colorsArea = '#0775FE';
// 楼栋数
const colorsNum = '#46FFFF';

/*
	渲染图表
	params: {
		elem: 标签DOM,
		data: 数据,
		colors: 颜色列表,
	}
*/
const renderChart = (elem, data, colors) => {
	let myChart = echarts.init(elem);
	const option = {
		series: [
			{   
                type: 'gauge',
				min:0,
                max:100,
                splitNumber: 5,
                axisLine: {
                    lineStyle: {
                        width: 10,
                        color: [[data/100, colors],[1, '#175573']]
                    }
                },
                pointer: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    distance: -30,
                    length: 30,
                    lineStyle: {
                        color: 'transparent',
                        width: 9
                    }
                },
                axisLabel: {
                    show: false,
                },
                detail: {
                    valueAnimation: true,
                    formatter: '{value}%',
                    color: colors,
                    fontSize: 18,
                    offsetCenter:[0,'5%'],
                },
				// 数据
				data: [
                    { value: data },
                ]
			}
		]
	};
	// 渲染
	option && myChart.setOption(option);
}

// 挂载完成
onMounted(() => {
    getData()
})
// 跳转到详情页
const getDetails = (val) => {
	emit("getDetails", val);
}
</script>
<style lang='scss' scoped>
.el-tabs{
    position: absolute;
    top: -70px !important;
    right: 0;
}
.detailed{
    width: 440px;
    display: flex;
    margin: -50px auto 20px;
    justify-content: space-around;
    &-item{
        width: 210px;
        height: 200px;
        background: rgba(0,0,0,0.25);
        background-image: url('@/assets/images/disaterLosses/bg.png');
        background-size: 100% 100%;
        box-sizing: border-box;
        color: #fff;
        font-size: 14px;
        text-align: center;
        position: relative;
        .echarts{
            display: block;
            margin: 27px auto 10px;
            width: 165px;
            height: 120px;
        }
        img{
            display: block;
            width: 154px;
            height: 125px;
            position: absolute;
            top: 10px;
            left: 28px;
        }
        b{
            position: absolute;
            bottom: 65px;
            display: block;
            width: 100%;
            text-align: center;
        }
        span{
            display: block;
            width: 100%;
            position: absolute;
            bottom: 12px;
            i{
                display: block;
                font-size: 24px;
                color: #1A76FF;
                font-style: normal;
            }
        }
        &:last-child{
            span{
                i{
                    color: #46FFFF;
                }
            }
        }
    }
}
</style>